<template>
  <div class>
    <el-row class="samples-info-box">
      <el-row :gutter="10">
        <el-col :span="18">
          <!-- gutter设置每个input还有按钮的间距10px -->

          <el-col :lg="18" class="samples-searchBar-wrapper" :class="{'samples-show-more':ismore}">
            <!-- 点击more将会改变input-wrapper的高度，默认为32px，即只展示一行 -->

            <!-- lg是指小屏幕下的尺寸，xl是正常屏幕下的尺寸
            即小屏幕一行最多展示三个input，大屏幕则是4个-->
            <el-col :lg="8" :xl="6">
              <el-input
                v-model="searchList.a1"
                size="small"
                placeholder="请输入内容"
                clearable
                class="samples-search-input"
              />
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-input
                v-model="searchList.a2"
                size="small"
                placeholder="请输入内容"
                clearable
                class="samples-search-input"
              />
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-input
                v-model="searchList.a3"
                size="small"
                placeholder="请输入内容"
                clearable
                class="samples-search-input"
              />
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-input
                v-model="searchList.a4"
                size="small"
                placeholder="请输入内容"
                clearable
                class="samples-search-input"
              />
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-input
                v-model="searchList.b1"
                size="small"
                placeholder="请输入内容"
                clearable
                class="samples-search-input"
              />
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-input
                v-model="searchList.b2"
                size="small"
                placeholder="请输入内容"
                clearable
                class="samples-search-input"
              />
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-input
                v-model="searchList.b3"
                size="small"
                placeholder="请输入内容"
                clearable
                class="samples-search-input"
              />
            </el-col>
            <el-col :lg="8" :xl="6">
              <el-input
                v-model="searchList.b4"
                size="small"
                placeholder="请输入内容"
                clearable
                class="samples-search-input"
              />
            </el-col>
          </el-col>
          <el-col :lg="6">
            <el-button size="small" type="primary" plain class="samples-search-btn">
              <i class="el-icon-search" />
            </el-button>
            <el-button size="small" type="text" class="samples-search-btn samples-ismore-button" @click="moreClick">
              MORE
              <i class="samples-search-icon" :class="[ismore?'el-icon-arrow-up':'el-icon-arrow-down']" />
            </el-button>
          </el-col>
        </el-col>
        <!-- 右半边按钮区域 -->
        <el-col :span="6" class="samples-text-right">
          <el-button size="small" type="success">新 增</el-button>
          <el-dropdown trigger="click" placement="bottom-start" class="samples-margin-left" @visible-change="dropClick">
            <el-button ref="dropdown-button-deal" size="small" type="primary" plain class="samples-btn-icon-right">
              更多操作
              <i :class="[dropShow?'el-icon-arrow-up':'el-icon-arrow-down']" />
            </el-button>
            <el-dropdown-menu slot="dropdown" class="samples-drop-menu-deal">
              <el-dropdown-item>生 效</el-dropdown-item>
              <el-dropdown-item>禁 用</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-row>
  </div>
</template>

<script>
export default {
  name: 'Admin',
  data() {
    return {
      dropShow: false,
      isopen: true,
      ismore: false,
      searchList: [
        { a1: '' },
        { a2: '' },
        { a3: '' },
        { a4: '' },
        { b1: '' },
        { b2: '' },
        { b3: '' },
        { b4: '' }
      ]
    }
  },
  mounted() {
    // JS代码（控制下拉菜单的宽度和按钮一致）
    this.$nextTick(() => {
      // 在mounted里用nextTick
      // 通过ref获取按钮宽度
      const deal_drop_width = this.$refs['dropdown-button-deal'].$el.offsetWidth
      // 获取下拉菜单元素
      const deal_drop_dom = document.getElementsByClassName(
        'el-dropdown-menu el-popper samples-drop-menu-deal'
      )[0]
      // 用模板字符串设置最小宽度
      deal_drop_dom.style.minWidth = `${deal_drop_width}px`
    })
  },
  methods: {
    moreClick() {
      this.ismore = !this.ismore
    },
    dropClick(show) {
      this.dropShow = show
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
